<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<% String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="<%=basePath%>">
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/simpleZoom.js"></script>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bs.css"/>
    <link rel="stylesheet" href="css/book_info.css"/>





    <title>书籍详情</title>
<style type="text/css">

    .main {
        position: relative;
    }
    .main:after {
        content: "";
        clear: both;
        display: table;
    }

    #show {
        width: 290px;
        height: 290px;
        overflow: hidden;
        position: relative;
        left: 0;
    }
    #show_mark {
        position: absolute;
        top: 0;
        left: 0;
        width: 290px;
        height: 480px;
        background-color: #000;
        opacity: .5;
        filter: alpha(opacity=50);
        cursor: crosshair;
        border: 1px solid #999;
        display: none;
    }

    #zoom {
        position: absolute;
        left: 292px;
        top: 0;
        z-index: 3;
        width: 1000px;
        height: 1000px;
        display: none;
        overflow: hidden;
        border: 1px solid #eee;

    }
    #zoom img {
        position: absolute;
        left: 0;
        top: 0;
        width: 1000px;
        height: 1000px;
    }
</style>





    <script type="application/javascript">
        $(function () {



            $("#show").simpleZoom({
                zoomBox : "#zoom",
                markSize : [90, 90],
                zoomSize : [290, 290],
                zoomImg : [1000, 1000]
            });

            $(".book_message li").click(function () {
                $(".book_message li").removeClass("active");
                $(this).addClass("active");
                $(".nav_content").hide();
                var name = $(this).attr("id");
                $("#" + name + "_content").show();
            });

            $("#num_add").click(function () {
                var num = parseInt($("#buy_num").val());
                if (num < 10) {
                    $("#buy_num").val(num + 1);
                }
            });

            $("#num_sub").click(function () {
                var num = parseInt($("#buy_num").val());
                if (num > 1) {
                    $("#buy_num").val(num - 1);
                }
            });
        });

        function submitComment(){
            var content=UE.getEditor('bookComment').getContent();
            var book_id=${bookInfo.book_id};

            var user_id=${sessionScope.loginUser.userId !=null ? sessionScope.loginUser.userId:0};


            $.post("comment/add",{"book_id":book_id ,"user_id":user_id ,"content":content},
                function(result){

                    if(result.code==500)
                        alert(result.message);
                    else{
                        alert(result.data);
                        UE.getEditor('bookComment').setContent('在这里填写');
                    }


                },"json");
        }

        function buyNow(bookId) {
            location.href =  "<%=basePath%>" + "order/info?book_id=" + bookId + "&buyNum=" + $("#buy_num").val();
        }

        function addCart(bookId) {
            location.href = "<%=basePath%>" + "cart/addition?book_id=" + bookId + "&buyNum=" + $("#buy_num").val();
        }
    </script>
</head>

<body>

<jsp:include page="header.jsp"/>

<!--
    作者：offline
    时间：2018-10-26
    描述：商品详情
-->
<div class="container">
    <div class="row" style="border-bottom:1px dashed #CCCCCC;margin-bottom:15px ;">
        <a href="#">
            <img src="img/1.jpg"/>
        </a>
    </div>
    <div class="row" id="breadcrumb" style="margin-bottom:40px" ;>
        <a href="index" target="_blank">
            <b>图书</b>
        </a>
        <span>&gt;</span>
        <a href="book/list?cateId=${bookInfo.book_category_id}" target="_blank">${bookInfo.categoryName}</a>
        <span>&gt;</span>
        <b>${bookInfo.name}</b>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12" style="height: 400px;">
            <div class="main">
                <div id="show">
                    <a href="javascript:void(0);">
                        <img src="${bookInfo.image_url}" width="290px" height="290px"/>
                    </a>
                </div>
                <div id="zoom"> <img src="${bookInfo.image_url}"/> </div>
            </div>



        </div>
        <div class="col-lg-9 col-md-6 col-sm-12 col-xs-12">

            <div class="name_info">
                <h1 style="font-weight: bold;">${bookInfo.name}</h1>
                <h2>
                    <span>${bookInfo.outline}</span>
                </h2>
            </div>
            <div class="book_info_base">
						<span class="book_info_span">
								作者<a href="book/list?keywords=${bookInfo.author}">${bookInfo.author}</a>著，
								${bookInfo.press}&nbsp;出品
							</span>
                <span class="book_info_span">
								出版社：<a href="book/list?keywords=${bookInfo.press}" target="_blank">${bookInfo.press}</a>
							</span>
                <span class="book_info_span">
								出版日期：<fmt:formatDate value="${bookInfo.publish_date}" pattern="yyyy-MM-dd"/>
							</span>
            </div>
            <div class="book_price">
                <p class="what_price">特价</p>
                <p class="price_info">
                    <span class="rob" style="font-size: 30px;">￥${bookInfo.price}</span>
                    <span style="color: red;">(${bookInfo.discount}折扣)</span>
                    <span>定价:</span>
                    <span class="oprice">￥${bookInfo.market_price}</span>
                </p>
            </div>

            <div class="buy_box">
                <div class="num buy_div">
                    <input type="text" class="text" id="buy_num" disabled="disabled" value="1" width="30px"
                           height="30px"/>
                    <a href="javascript:void(0);" class="num_add" id="num_add"></a>
                    <a href="javascript:void(0);" class="num_sub" id="num_sub"></a>
                </div>
                <div class="buy_div">
                    <div class="cart">
                        <a href="javascript:void(0);" onclick="addCart(${bookInfo.book_id})" class="add_cart">
                            <i class="cart_icon"></i> 加入购物车
                        </a>
                    </div>
                </div>
                <div class="buy_div buy_now_div">
                    <a href="javascript:void(0);" onclick="buyNow(${bookInfo.book_id})" class="buy_now">立即购买</a>
                </div>
                <div class="clear"></div>
                <div class="buy_tip">每账户最多可购买<b>10</b>件</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
            <div class="product_left">
                <h3 style="">浏览此商品的顾客也同时浏览</h3>
                <ul class="product_left_ul">

                    <c:forEach items="${recommendBookList}" var="recommendBook">
                        <c:if test="${recommendBook.book_id != bookInfo.book_id}">
                            <li class="product_li">
                                <p class="pic">
                                    <a href="book/info/${recommendBook.book_id}" class="img" target="_blank">
                                        <img src="${recommendBook.image_url}"/>
                                    </a>
                                <p class="price">
                                    <span class="rob">￥${recommendBook.price}</span>
                                    <span class="oprice">￥${recommendBook.market_price}</span>
                                </p>
                                <p class="name">
                                    <a href="book/info/${recommendBook.book_id}">${recommendBook.name}</a>
                                </p>
                                <p class="author">${recommendBook.author} 著，${recommendBook.press} 出</p>
                                </p>
                            </li>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">

            <ul class="nav nav-tabs nav-justified book_message">
                <li class="active" id="book_detail">
                    <a href="javascript:void(0)">书籍详情</a>
                </li>
                <li id="book_comment">
                    <a href="javascript:void(0)">书籍评论</a>
                </li>
            </ul>
            <div class="content">
                <div id="book_detail_content" class="nav_content">
                    <ul id="key">
                        <li>开 本：${bookInfo.size}</li>
                        <li>纸 张：胶版纸</li>
                        <li>包 装：${bookInfo.pack_style}</li>
                        <li>是否套装：否</li>
                        <li>国际标准书号ISBN：${bookInfo.isbn}</li>
                    </ul>
                    <div id="detail" class="section">


                        <div id="bookDetail" class="section">
                            <div class="title">
                                <span class="title_span">书籍详情</span>
                            </div>
                            <p>
                                ${bookInfo.detail}
                            </p>
                        </div>


                        <div id="feature" class="section">
                            <div class="title">
                                <span class="title_span">产品特色</span>
                            </div>
                            <p>
                                ${empty bookDesc.bookDesc?"<img src='book/book3_1.jpg'>":bookDesc.bookDesc}
                            </p>
                        </div>
                        <div class="abstract" class="section">
                            <div class="title">
                                <span class="title_span">作者简介</span>
                            </div>
                            <blockquote>
                                <pre>${bookInfo.author}</pre>
                            </blockquote>
                        </div>
                        <div class="content" class="section">
                            <div class="title">
                                <span class="title_span">目　　录</span>
                            </div>
                            <blockquote>
                                <pre>${bookInfo.catalog}</pre>
                            </blockquote>
                        </div>
                    </div>
                </div>
                <div id="book_comment_content" style="display: none;" class="nav_content">

                    <br/>
                    <shiro:user>
                    <div style="float: right">
                    <input class="modal-title" data-toggle="modal" data-target="#commentModal" type="button" id="comment_btn" value="发布评论" />
                    </div>
                    </shiro:user>
                    <div class="title">
                        <span class="title_span">商品评论</span>
                    </div>
                    <br/>



                    <div  class="content" >
                        <div >
                            <div >
                                <c:choose>
                                    <c:when test="${commentList.size()==0 }">
                                        <div align="center" style="padding-top: 20px">未评论！</div>
                                    </c:when>

                                    <c:otherwise>
                                        <c:forEach items="${commentList}" var="comment"  varStatus="varStatus">
                                            <ul  style="float: left">
                                                <li >
                                                    <div class="media-left" >
                                                            <img src="${comment.imageUrl}" class="img-rounded media-object" width="50px" height="50px" />
                                                    </div>
                                                    <div class="media-body" >
                                                        <h5 class="media-heading"> ${comment.username}  <p style="float: right;">
                                                            <p style="float: right;">  <fmt:formatDate value="${comment.date}" pattern="yyyy-MM-dd HH:mm:ss"/>
                                                        </h5>
                                                        <p>${comment.content}</p>
                                                         </p>

                                                        <br/><br/><br/>
                                                    </div>
                                                </li>

                                            </ul>
                                            <br/><br/>
                                        </c:forEach>
                                    </c:otherwise>
                                </c:choose>

                            </div>
                        </div>
                    </div>


























                    <!-- 模态框（Modal） -->
                    <div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="passwordModalLabel">发布评论内容（不超过300字）</h4>
                                </div>

                                    <div class="modal-body" style="height: 580px;width:596px;overflow: auto">
                                        <table style="width: 560px;height: 560px">

                                            <tr>
                                                <td>


                                                    <script id="bookComment" name="bookComment" type="text/plain" >
                                                      </script>


                                                </td>
                                            </tr>
                                        </table>
                                        <!-- 配置文件 -->
                                        <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
                                        <!-- 编辑器源码文件 -->
                                        <script type="text/javascript" src="ueditor/ueditor.all.js"></script>
                                        <!-- 实例化编辑器 -->
                                        <script type="text/javascript">
                                            var ue = UE.getEditor('bookComment');
                                            //对编辑器的操作最好在编辑器ready之后再做
                                            ue.ready(function () {
                                                //设置编辑器的内容
                                                ue.setContent('在这里填写');
                                                ue.setHeight("300");
                                                //获取html内容，返回: <p>hello</p>
                                                var html = ue.getContent();
                                                //alert(html);
                                                //获取纯文本内容，返回: hello
                                                // var txt = ue.getContentTxt();
                                            });
                                        </script>
                                    </div>
                                    <div class="modal-footer">
                                        <span id="changePwd"></span>
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button class="btn btn-primary" onclick="submitComment();">提交内容</button>
                                    </div>

                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>




                </div>
            </div>
        </div>

    </div>
</div>
</body>
</html>